<template>
  <div class="home">
    <a-menu
      id="dddddd"
      style="width: 300px"
      v-model:openKeys="openKeys"
      v-model:selectedKeys="selectedKeys"
      mode="inline"
    >
      <a-sub-menu key="sub1" @titleClick="titleClick">
        <template #title>
          <span>
            <WalletOutlined />
            <span>发表博文</span>
          </span>
        </template>
        <a-menu-item @click="showModal">
          <PlusCircleFilled />
          <span>新建文章文件夹</span>
        </a-menu-item>
        <a-modal
          v-model:visible="visible"
          @ok="handleOk"
          okText="确认"
          cancelText="取消"
        >
          <p style="margin-bottom: 20px"></p>
          <a-input v-model:value="filename" placeholder="请输入专题名称" />
        </a-modal>

        <a-menu-item
          v-for="(item, index) in arrangeList"
          :key="index"
          @click="handleClicks(item)"
        >
          {{ item.filename }}
        </a-menu-item>
      </a-sub-menu>

      <a-sub-menu key="sub2" @titleClick="titleClick">
        <template #title>
          <span>
            <SendOutlined />
            <span>发布动态</span>
          </span>
        </template>
        <router-link to="/create/createM">
          <a-menu-item key="2">发布动态</a-menu-item>
        </router-link>
      </a-sub-menu>

      <a-sub-menu key="sub3" @titleClick="titleClick">
        <template #title>
          <span>
            <SettingOutlined />
            <span>设置</span>
          </span>
        </template>
        <a-menu-item key="3">切换日间/夜间模式</a-menu-item>
        <router-link to="/create/litter">
          <a-menu-item key="4">回收站</a-menu-item>
        </router-link>
      </a-sub-menu>
    </a-menu>
    <div class="body">
      <router-view :key="$route.query.fileType"></router-view>
    </div>
  </div>
</template>
<script>
import { defineComponent, ref } from "vue";
import {
  WalletOutlined,
  SendOutlined,
  PlusCircleFilled,
  SettingOutlined,
} from "@ant-design/icons-vue";
import { useRoute, useRouter } from "vue-router";
import { doArrange, getArrange } from "../../api/create";
import { message } from "ant-design-vue";

export default defineComponent({
  setup() {
    const selectedKeys = ref(["1"]);
    const openKeys = ref([]);
    const route = useRoute();
    const router = useRouter();

    const visible = ref(false);
    const filename = ref("");
    const arrangeList = ref([{ filename: "未分类" }]);

    const showModal = () => {
      visible.value = true;
    };

    const handleOk = () => {
      doArrange({
        url: "/create/doArrange",
        filename: filename.value,
        success: (res) => {
          // console.log(res);
          message.info(res.data.data);
          arrangeList.value.push({
            filename: res.data.filename,
          });
        },
        err: (err) => {
          console.log(err);
        },
      });
      visible.value = false;
    };

    openKeys.value.push(route.query.id);

    const handleClicks = (item) => {
      // console.log(item);
      router.push({
        path: "/create/createA",
        query: { fileType: item.filename },
      });
    };

    const titleClick = () => {
      // console.log("titleClick", e);
    };

    getArrange({
      url: "/create/getArrange",
      success: (res) => {
        // console.log(res.data);
        for (let i = 0; i < res.data.length; i++) {
          arrangeList.value.push({
            filename: res.data[i].fileName,
          });
        }
      },
      err: (err) => {
        console.log(err);
      },
    });

    return {
      handleClicks,
      selectedKeys,
      openKeys,
      titleClick,
      visible,
      showModal,
      handleOk,
      filename,
      arrangeList,
    };
  },

  components: {
    WalletOutlined,
    SendOutlined,
    PlusCircleFilled,
    SettingOutlined,
  },
});
</script>

<style scoped>
.home {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
}
.body {
  width: 100%;
  height: 100%;
  margin-left: 0;
  padding: 0;
}
</style>
        
